<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <title>Hello World!</title>
  <script src="./Build/CesiumUnminified/Cesium.js"></script>
  <style>
    @import url(./templates/bucket.css);

    html,
    body,
    #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #toolbar {
      background: rgba(42, 42, 42, 0.8);
      padding: 4px;
      border-radius: 4px;
    }

    #toolbar input {
      vertical-align: middle;
      padding-top: 2px;
      padding-bottom: 2px;
    }
  </style>
</head>

<body>
  <div id="cesiumContainer" class="fullSize"></div>
  <div id="toolbar">
    <div>Height</div>
    <input type="range" min="-100.0" max="100.0" step="1" data-bind="value: height, valueUpdate: 'input'">
    <input type="text" size="5" data-bind="value: height">
  </div>
  <script>
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNWY1NTNiZC0yOWZjLTQxYTEtYmFmZS0zZDhhOWRmMmMyM2YiLCJpZCI6MTM2MDIyLCJpYXQiOjE2ODI2NzE3NjR9.iCrukqqU__ODBrOwYgkTzv2fyg_yAli8GyePHhjgiFc';

    const viewer = new Cesium.Viewer("cesiumContainer", {
      baseLayerPicker: true,//是否显示图层选择器
      shadows: true,//是否显示阴影 
    })

    viewer.scene.globe.depthTestAgainstTerrain = true;//开启地形深度检测
    const viewModel = {
      height: 0,
    }; // 创建视图模型
    Cesium.knockout.track(viewModel); // 绑定视图模型

    const toolbar = document.getElementById("toolbar");
    Cesium.knockout.applyBindings(viewModel, toolbar);

    const tileset = new Cesium.Cesium3DTileset({
      url: "./SampleData/Cesium3DTiles/Tilesets/Tilesets/tileset.json"
    }); // 创建3D Tiles

    tileset.readyPromise
      .then(function (tileset) {
        viewer.scene.primitives.add(tileset);
        viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0));
        // viewModel.height = tileset.boundingSphere.center.z;
      })
      .catch(function (error) { console.log(error); }); // 添加3D Tiles

    Cesium.knockout
      .getObservable(viewModel, "height")
      .subscribe(function (height) {
        height = Number(height);
        if (isNaN(height)) {
          return;
        }

        const cartographic = Cesium.Cartographic.fromCartesian(
          tileset.boundingSphere.center
        );
        const surface = Cesium.Cartesian3.fromRadians(
          cartographic.longitude,
          cartographic.latitude,
          0.0
        );
        const offset = Cesium.Cartesian3.fromRadians(
          cartographic.longitude,
          cartographic.latitude,
          height
        );
        const translation = Cesium.Cartesian3.subtract(
          offset,
          surface,
          new Cesium.Cartesian3()
        );
        tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
      });
  </script>
</body>

</html>